<template>
  <div class='User'>
    <v-top></v-top>
    <div class='redsolid'></div>
    <v-module>


      <div class='top' style='padding: 30px;'>
        <div class='userpic'>
          <img width='188' height='188'
               :src='user.avatarUrl' alt=''>
        </div>
        <div class='userdata'>
          <ul>
            <li>
              <span style='font-size: 22px' class='user-name'>{{ user.nickname }}</span>
              <span class='user-vip'></span>
              <span class='user-grade'>
                  {{usergrade}}
                  <i></i>
                </span>
              <span class='sex'></span>
              <div class='btn'>
                <a class='send' href=''>发私信</a>
                <a class='follow' href=''>关注</a>
                <a class='follow' style='display: none' href=''>已关注</a>
                <a class='follow' style='display: none' href=''>互相关注</a>
              </div>
            </li>
            <li class='professional'>
              <span></span>
              <i style='font-style: normal' v-for='(item,index) in desc' :key="index">
                {{ item }}、
              </i>
            </li>
          </ul>
          <ul class='user-data'>
            <li>
              <a href=''>
                <strong>{{ user.eventCount }}</strong>
                <span>动态</span>
              </a>
            </li>
            <li>
              <a href=''>
                <strong>{{ user.follows }}</strong>
                <span>关注</span>
              </a>
            </li>
            <li>
              <a href=''>
                <strong>{{ user.followeds }}</strong>
                <span>粉丝</span>
              </a>
            </li>
          </ul>
          <p style='line-height:20px'>个人介绍：{{ user.signature }}</p>
          <p>所在地区：广东省-茂名市 <span>年龄：{{ birthday }}后</span></p>
        </div>

      </div>


    </v-module>
  </div>
</template>
<script>
import moment from 'moment'
import config from '@/network/config'
import Top from '@/views/Top/Top'
import module from '@/views/Module/module'
import axios from 'axios'

export default {
  name: 'User',
  data() {
    return {
      url: config.url,
      user: [],
      birthday: '',
      desc: [],
      usergrade:'',
      msg:''
    }
  },
  components: {
    'v-top': Top,
    'v-module': module
  },
  methods: {
    getdata() {
      axios.get(`${this.url}/user/detail`, {
        params: {
          uid: this.$route.params.id
        }
      }).then(res => {
        // console.log(res.data)
        this.usergrade = res.data.level
        this.user = res.data.profile
        this.birthday = moment(res.data.profile.birthday).format('YY')
        var data = res.data.profile.allAuthTypes

        if(data === undefined){
          this.desc == ''
        }else {
          data.forEach(item => {
            this.desc.push(item.desc)
          })
        }

      })



    },//获取用户最新信息

  },
  mounted() {
    this.getdata()
    console.log()
  }
}
</script>
<style scoped>
.userdata p {
  font-size: 12px;
  color: #666;
  margin-top: 10px;
}

/*个人简介*/
.user-data span {
  font-size: 12px;
}

strong {
  font-weight: normal;
}

.user-data a {
  color: #666;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.5rem;
}

.user-data li:first-child {
  padding-left: 0;
  border: none;
}

.user-data {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.user-data li {
  padding: 0 40px 0 20px;
  border-left: 1px solid #ddd;
}

/*用户动态等*/
.professional {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;;
}

.professional span {
  background: url("../../../assets/images/icon2.png") -75px -480px;
  margin-right: 6px;
  width: 68px;
  height: 20px;
}

/*称呼*/
.follow {
  margin: 4px 0 0 15px;
  width: 40px;
  height: 31px;
  padding-left: 30px;
  color: #fff;
  background: url("../../../assets/images/button.png") 0 -720px;
  font-size: 12px;
  line-height: 31px;
}

.send {
  float: left;
  margin: 4px 0 0 15px;
  width: 75px;
  height: 31px;
  background: url("../../../assets/images/button.png") 0 -810px;
  font-size: 12px;
  line-height: 31px;
  text-indent: 1.8rem;
}

.btn {
  display: flex;
  align-items: center;
}

/*按钮*/
.sex {
  margin: 9px 0 7px 8px;
  width: 20px;
  height: 20px;
  background: url("../../../assets/images/icon.png") -41px -57px;
}

/*性别*/
.user-grade i {
  background: url("../../../assets/images/icon2.png") -191px -190px;
  float: right;
  width: 9px;
  height: 19px;
}

.user-grade {
  background: url("../../../assets/images/icon2.png") -135px -190px;
  display: inline-block;
  height: 19px;
  overflow: hidden;
  padding-left: 29px;
  line-height: 21px;
  color: #e03a24;
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  float: left;
  margin: 0 0 0 10px;
  overflow: hidden;
  vertical-align: middle;
}

.user-vip {
  width: 57px;
  height: 36px;
  background-size: 100% 20px;
  float: left;
  margin-left: 10px;
  background: url(../../../assets/images/vip.png) center no-repeat;
  background-size: 100% 20px;
}

.userdata ul li {
  display: flex;
  align-items: center;
}

/*用户资料*/
.userpic img {
  padding: 2px 2px 0px 2px;
}

.userpic {
  border: 1px solid #ccc;
  margin-right: 40px;
}

.top {
  display: flex;
}

/*用户 头像*/
.redsolid {
  z-index: 90;
  box-sizing: border-box;
  background-color: #C20C0C;
  border-bottom: 1px solid #a40011;
  height: 5px;
  _overflow: hidden;
  border-bottom: none;
}
</style>